<template>
  <div class="main-container">
    <index-aside v-if="'vertical' == 'vertical'" class="main-aside"></index-aside>
    <el-main class="main-content">
      <index-header class="main-header"></index-header>
      <index-aside v-if="'vertical' == 'horizontal'" class="horizontal-aside"></index-aside>
      <bread-crumbs :title="title" class="bread-crumbs"></bread-crumbs>
      <router-view class="router-view"></router-view>
    </el-main>
  </div>
</template>

<script>
import IndexAside from '@/components/index/IndexAsideStatic'
import IndexHeader from '@/components/index/IndexHeader'
import menu from "@/utils/menu";
export default {
  components: {
    IndexAside,
    IndexHeader
  },
  data() {
    return {
      menuList: [],
      role: "",
      currentIndex: -2,
      itemMenu: [],
      title: ''
    };
  },
  mounted() {
    let menus = menu.list();
    this.menuList = menus;
    this.role = this.$storage.get("role");
  },
  created() {
    this.init();
    console.log(console.log(this.$route.path))
  },
  methods: {
    init(){
      this.$nextTick(()=>{
        
      })
    },
    menuHandler(menu) {
      this.$router.push({
        name: menu.tableName
      });
      this.title = menu.menu;
    },
    titleChange(index, menus) {
      this.currentIndex = index
      this.itemMenu = menus;
      console.log(menus);
    },
    homeChange(index) {
      this.itemMenu = [];
      this.title = ""
      this.currentIndex = index
      this.$router.push({
        name: 'home'
      });
    },
    centerChange(index) {
      this.itemMenu = [{
        "buttons": ["新增", "查看", "修改", "删除"],
        "menu": "修改密码",
        "tableName": "updatePassword"
      }, {
        "buttons": ["新增", "查看", "修改", "删除"],
        "menu": "个人信息",
        "tableName": "center"
      }];
      this.title = ""
      this.currentIndex = index
      this.$router.push({
        name: 'home'
      });
      
    }
  }
};
</script>

<style lang="scss" scoped>
.main-container {
  height: 100%;
  display: flex;
}

.main-aside {
  box-shadow: 6px 0 6px #ddd;
  padding: 64px 0 60px;
  overflow: hidden;
  top: 0;
  left: 0;
  background: #3f3f3f;
  bottom: 0;
  width: 200px;
  font-size: 0px;
  position: fixed;
  height: 100%;
  z-index: 1001;
  transition: all 0.3s;
}

.main-content {
  min-height: 100%;
  padding: 0;
  margin: 0 0 0 200px;
  position: relative;
  background: #fff;
  display: block;
}

.main-header {
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  padding: 0 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  top: 0;
  left: 200px;
  background: #e6a23c;
  width: calc(100% - 200px);
  position: fixed;
  z-index: 1;
  height: 64px;
  transition: all 0.3s;
}

.horizontal-aside {
  width: 100%;
  border-bottom: 1px solid #efefef;
  background: #304156;
  height: auto;
}

.bread-crumbs {
  padding: 12px 20px;
  margin: 64px 0 0;
  border-bottom: 1px solid #eee;
  background: #f8f9fa;
  width: 100%;
  height: auto;
  font-size: 14px;
}

.router-view {
  padding: 20px;
  background: #fff;
}

a {
  text-decoration: none;
  color: #555;
  transition: all 0.3s;
  
  &:hover {
    color: #e6a23c;
    background: rgba(230,162,60,0.1);
  }
}

.nav-list {
  width: 100%;
  margin: 20px auto 0;
  text-align: left;

  .nav-title {
    display: inline-block;
    font-size: 15px;
    color: #333;
    padding: 15px 25px;
    border: none;
    transition: all 0.3s;

    &.active {
      color: #e6a23c;
      background-color: #fff;
    }
  }
}

.nav-item {
  margin-top: 20px;
  background: #fff;
  padding: 15px 0;
  border-radius: 4px;
  box-shadow: 0 2px 12px 0 rgba(0,0,0,0.1);

  .menu {
    padding: 15px 25px;
    cursor: pointer;
    transition: all 0.3s;

    &:hover {
      background: #f5f7fa;
    }
  }
}

.detail-form-content {
  background: transparent;
  padding: 20px;
  border-radius: 4px;
}
</style>
